<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 两者顺序不能变化，因为elementui是基于vue的 -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <link href="/css/2.15.12/index.css" rel="stylesheet">
    <script src="/js/echarts.js"></script>
    <script src="/plugins/vue-2.6.11/vue.js"></script>
    <script src="/plugins/element-2.4.5/index.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/2.15.12/index.js"></script>

    <style>
        @import '/js/timeline/timeline.css';
        @import '/js/timeline-item/timeline-item.css';

        .el-cascader{
            width: 100%;
        }
        body{
            margin: 0%;
            padding: 0%;
        }
        /* 顶栏的样式 */
        .el-header{
            background: rgba(245, 0, 0, 0);
            color: aliceblue;
            text-align: left;
        }

        /* 内容栏样式 */
        .el-main{

            height: 650px;
            color: aliceblue;

        }
        /* 列的样式 */
        .el-col{

            height: 550px;
        }
        .col1{

            color: black;
            text-align: center;
        }
        .col2{
            color: black;
        }
        .col3{

            color: black;
            text-align: center;
        }
        .el-footer{

            color: black;
        }
    </style>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }
        .el-card-define {
            min-height: 50%;
            height:50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 定义一个容器 -->
    <el-container>
        <!-- 定义一个顶栏 -->
        <el-header height='200px'>
            <!-- 用普通的标签设置标题 -->
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;"
                     @submit.native.prevent
            >
                <el-form-item label="血液ID">
                    <el-input placeholder="请输入血液ID" v-model="bloodId" @keyup.enter.native="load"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"@click="load" >搜索</el-button>
                    <el-button type=="primary" @click="showme">导出</el-button>
                </el-form-item>

            </el-form>
            <el-table :data="tableDataArray" style="width: 100%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change="">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column prop="blood_component" label="血液种类" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="abo_blood_type" label="血液abo类型" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="rh_blood_type" label="血液rh类型" min-width="10%" align="center">
                </el-table-column>
                <el-table-column prop="blood_count" label="血液规格" min-width="15%" align="center">
                </el-table-column>
                <el-table-column prop="blood_source" label="血液来源" min-width="15%" align="center">
                </el-table-column>
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="concrete()":style="{ display: visiblePublish }">查看当前状态</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-header>
        <!-- 嵌套的容器 -->
        <el-container>
            <!-- 定义内容栏 -->
            <el-main>
                <!-- 定义第一行，栅格布局 -->
                <el-row>
                    <!-- 一行中有两个大小相同的列 -->
                    <el-col :span='12' class='col2'>
                        <div style="display: flex;justify-content: center;align-items:center; margin-top: 10px; height: 530px;;min-width:400px">
                            <transition name="el-fade-in-linear">
                                <div v-show="showone" class="transition-box">
                                    <el-card class="box-card" style="min-height:520px;" align="middle">
                                        <div slot="header" class="clearfix">
                                            <span style="font-size:30px;
                                                  font-weight: bold;
                                                  color: black;" >当前血液流通状态</span>
                                        </div>
                                        <div class="block" style="display: flex;justify-content: center;align-items:center">
                                            <el-timeline>
                                                <el-timeline-item placement="top"
                                                                  v-for="(activity, index) in reActive"
                                                                  :key="index"
                                                                  :icon="activity.icon"
                                                                  :type="activity.type"
                                                                  :color="activity.color"
                                                                  :size="activity.size"
                                                                  :timestamp="activity.timestamp">
                                                    <el-card  class="el-card-define" shadow="hover"  @click.native="showme(activity.content)">
                                                        {{activity.content}}
                                                    </el-card>
                                                </el-timeline-item>
                                            </el-timeline>
                                        </div>
                                    </el-card>

                                </div>
                            </transition>
                        </div>
                    </el-col>
                    <el-col :span='12' class='col1'>
                        <div style="display: flex;justify-content: center;align-items:center; margin-top: 10px; height: 530px;">
                            <transition name="el-fade-in-linear">
                                <div v-show="showtwo" class="transition-box">
                                    <el-card class="box-card" style="min-height:520px;" align="middle">
                                        <div slot="header" class="clearfix">
                                            <span style="font-size:30px;
                                                  font-weight: bold;
                                                 color: black;" >
                                                状态信息详情</span>
                                        </div>
                                        <el-descriptions v-if="showInformation==0" class="margin-top"   title="入库信息" :column="1" :size="size" border>
                                            <el-descriptions-item v-if="tableMind.number">
                                                <template slot="label">
                                                    入库单据号
                                                </template>
                                                {{tableMind.number}}
                                            </el-descriptions-item>
                                            <el-descriptions-item v-if="tableMind.batch_number">
                                                <template slot="label">
                                                    入库批次号
                                                </template>
                                                {{tableMind.batch_number}}
                                            </el-descriptions-item>
                                            <el-descriptions-item v-if="tableMind.blood_number">
                                                <template slot="label">
                                                    血站发血单号
                                                </template>
                                                {{tableMind.blood_number}}
                                            </el-descriptions-item>
                                            <el-descriptions-item v-if="tableMind.blood_source">
                                                <template slot="label">
                                                    血液来源
                                                </template>
                                                {{tableMind.blood_source}}
                                            </el-descriptions-item>
                                            <el-descriptions-item >
                                                <template slot="label"v-if="tableMind.operator">
                                                    操作人员姓名
                                                </template>
                                                {{tableMind.operator}}
                                            </el-descriptions-item>
                                            <el-descriptions-item v-if="tableMind.operator_id">
                                                <template slot="label">
                                                    操作人员ID
                                                </template>
                                                {{tableMind.operator_id}}
                                            </el-descriptions-item>
                                        </el-descriptions>
                                        <el-descriptions v-if="showInformation==1" class="margin-top"   title="在库信息" :column="1" :size="size" border>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    血液编号
                                                </template>
                                                {{tableMind.bloodId}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    入库时间
                                                </template>
                                                {{tableMind.inboundTime}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    预计失效时间
                                                </template>
                                                {{tableMind.failureTime}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    货架位置
                                                </template>
                                                {{tableMind.position}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    血液单位
                                                </template>
                                                {{tableMind.unitVolume}}
                                            </el-descriptions-item>
                                        </el-descriptions>
                                        <el-descriptions v-if="showInformation==3" class="margin-top"   title="出库信息" :column="1" :size="size" border>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    血液规格
                                                </template>
                                                {{tableMind.bloodCount}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    用血科室
                                                </template>
                                                {{tableMind.department}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    输血编码
                                                </template>
                                                {{tableMind.transfusionNumber}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    患者姓名
                                                </template>
                                                {{tableMind.name}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    患者病历Id
                                                </template>
                                                {{tableMind.patientId}}
                                            </el-descriptions-item>
                                        </el-descriptions>
                                        <el-descriptions v-if="showInformation==4" class="margin-top"   title="过期信息" :column="1" :size="size" border>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    血液编号
                                                </template>
                                                {{tableMind.bloodId}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    入库时间
                                                </template>
                                                {{tableMind.inboundTime}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    原有失效时间
                                                </template>
                                                {{tableMind.failureTime}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    货架位置
                                                </template>
                                                {{tableMind.position}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    血液单位
                                                </template>
                                                {{tableMind.unitVolume}}
                                            </el-descriptions-item>
                                        </el-descriptions>

                                    </el-card>
                                </div>
                            </transition>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    // new Vue({
    //     el:"#app"
    // })
    (function () {
        var vm = window.vm = new Vue({
            el: '#app',
            data() {
                return {
                    size:'',

                    //流程进度信息
                    activities: [{
                        content: '入库',
                        timestamp: '',
                        size: 'large',
                        type: 'primary',
                        icon: 'el-icon-more'
                    }, {
                        content: '在库',
                        timestamp: '',
                        size: 'large',
                        color:''

                    } ],
                    //表格信息
                    showone:false,
                    showtwo:false,
                    showInformation:'',
                    bloodId:"878",
                    //复制流程数组
                    reActive:[{
                        content: '入库',
                        timestamp: '',
                        size: 'large',
                        type: 'primary',
                        icon: 'el-icon-more'
                    }, {
                        content: '在库',
                        timestamp: '',
                        size: 'large',
                        color:''

                    } ],
                    visiblePublish: 'none',
                    tableDataArray:[],
                    tableMind:{},
                    tableData: [{
                        abo_blood_type:"",
                        blood_component:"",
                        blood_count:"",
                        blood_location:"",
                        blood_source:"",
                        collect_time:"",
                        }],

                    state:"",
                    stateData:{},

                }
            },
            created() {

                // this.load()
            },
            methods: {
                showme(value){
                    this.showtwo=false
                    // console.log(value)
                    if(value=="入库" ){

                        fetch(`/bloodStocks/normal/getBloodInBound?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.tableMind=res.data[0]
                            }
                        )
                        this.showInformation=0
                    }
                    if(value=="在库" ){

                        fetch(`/bloodStocks/normal/getBloodInfoAlone?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.tableMind=res.data[0]
                            }
                        )
                        this.showInformation=1
                    }
                    if(value=="已过期" ){
                        fetch(`/bloodStocks/normal/getBloodInfoAlone?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.tableMind=res.data[0]
                            }
                        )
                        this.showInformation=4
                    }
                    if(value=="已出库" ){

                        fetch(`/patientTransfusionInformation/normal/getBloodRecoredById?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.tableMind=res.data[0]
                            }
                        )
                        this.showInformation=3
                    }
                    this.showtwo=!this.showtwo
                },

                load() {

                    this.showone=false;
                    this.showtwo=false;
                    this.tableData=undefined
                    this.tableDataArray=[],
                    fetch(`/bloodInformation/normal/getBloodGo?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                        this.tableData=res.data
                        if(res.code==200){
                            console.log(res.data)
                            this.state=res.data.state
                            this.tableDataArray.push(res.data)
                            console.log(this.reActive[0])
                            this.activities[0].timestamp=this.tableData.collect_time
                            this.activities[0].information= this.activities[0].information+this.bloodId
                        }else {
                            this.$notify.error({
                                title : '错误',
                                message : '血液信息不存在或未同步'
                            })
                        }

                    })
                    this.visiblePublish= ''
                },

                concrete(){

                    this.reActive= this.activities.slice()
                    this.tableMind={};
                    if(this.state!="1" ){
                        fetch(`/bloodStocks/normal/getBloodInfoAlone?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.reActive[1].timestamp=res.data[0].inboundTime
                            }
                        )
                    }
                    if(this.state=="2" )
                    { this.reActive[1].color='#ff0b0b'
                        this.stateData= this.tableData
                    }
                    if(this.state=="26"){
                        fetch(`/bloodStocks/normal/getBloodInfoAlone?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                                this.reActive.push(
                                    {
                                        content: '已过期',
                                        timestamp: res.data[0].failureTime,
                                        size: 'large',
                                        color:"rgb(248,0,0)"
                                    }
                                )
                            }
                        )
                    }
                    if(this.state=="3") {
                        fetch(`/patientTransfusionInformation/normal/getBloodRecoredById?bloodId=${this.bloodId} `).then(res => res.json()).then(res => {
                            this.reActive.push(
                                {
                                    content: '已出库',
                                    timestamp: res.data[0].createTime,
                                    size: 'large',
                                    color:"#ff0b0b"
                                }
                            )
                        })
                    }
                    this.caculateState=true
                    this.showone=true
                    this.showtwo=false
                }

            }
        });
    })()
</script>
</body>
</html>
